<div [ngClass]="{ 'large-search': true, active: focused }">
  <input
    #queryInput
    type="text"
    id="queryInput"
    name="query"
    size="40"
    autocomplete="off"
    autocorrect="off"
    autocapitalize="off"
    spellcheck="false"
    [ngbTypeahead]="typeaheadSearch"
    (selectItem)="typeaheadSelected($event)"
    [focusFirst]="false"
  />
  <button #queryButton class="btn btn-primary">
    <span class="load" *ngIf="loading"><div class="loading-indicator"></div></span>
    <span class="fa fa-search" *ngIf="!loading"></span>
  </button>
</div>
<div class="text-left mt-1">
  <a [ngClass]="{ 'text-white': textColour === 'text-white' }" (click)="advancedSearch()" routerLinkActive="router-link-active"
    >Advanced Search</a
  >
</div>
